<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <!-- <meta name="viewport" content="width=device-width, user-scalable=no"> -->

</head>
<style>
    html,
    body {
        position: relative;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .target,
    .target2 {
        position: absolute;
        background: #faa;
        box-sizing: border-box;
    }

    .target.selected {
        border: 4px solid #f55;
    }

    .button {
        position: absolute;
        left: 500px;
        top: 50px;
        background: #eee;
        padding: 15px 40px;
        display: inline-block;
        border-radius: 5px;
        font-weight: bold;
        color: #444;
    }

    .button.selected {
        color: #fff;
        background: #66d;
    }
</style>

<body>
    <div>
        <div class="button"> Shift </div>
        <div class="target" style="top: 50px; left: 50px; width: 50px; height: 50px">T1</div>
        <div class="target" style="top: 50px; left: 150px; width: 150px; height: 50px">T2</div>
        <div class="target" style="top: 150px; left: 50px; width: 100px; height: 50px">T3</div>
        <div class="target" style="top: 300px; left: 250px; width: 50px; height: 150px">T4</div>
        <div class="target" style="top: 200px; left: 400px; width: 100px; height: 0px"></div>

        <div class="target2" style="top: 330px; left: 80px; width: 120px; height: 120px" contenteditable="true">T7</div>


        <svg>
            <line class="target" x1="50" x2="50" y1="0" y2="50" stroke-width="10" stroke="#000000"></line>
        </svg>
    </div>
</body>
<script src="../../dist/selecto.js"></script>

<div class="hi"></div>
<script>
    const selecto = new Selecto({
        dragContainer: "body div",
        selectableTargets: [".target"],
        hitRate: 0,
        selectByClick: true,
        selectFromInside: true,
        continueSelect: true,
        ratio: 0,
    });

    selecto.on("select", e => {
        e.added.forEach((el) => {
            el.classList.add("selected");
        });
        e.removed.forEach((el) => {
            el.classList.remove("selected");
        });
    });
    document.querySelector(".target").addEventListener("click", e => {
        console.log("CLICK", e);
        
    })
    // <Selecto
    //   className="selecto-selection"
    //   dragContainer={".elements"}
    //   selectableTargets={[".selecto-area .cube"]}
    //   hitRate={0}
    //   selectByClick={true}
    //   selectFromInside={true}
    //   continueSelect={true}
    //   ratio={0}
    //   onSelect={(e) => {
    //     e.added.forEach((el) => {
    //       el.classList.add("selected");
    //     });
    //     e.removed.forEach((el) => {
    //       el.classList.remove("selected");
    //     });
    //   }}
    // ></Selecto>
</script>

</html>